@theme-color: #37bac8;

.homePage {
    background-color: #f9f9f9;
    overflow: scroll;
    margin-top: -55px;

    // top 栏， 到 轮播图的高度之后，就要设置成蓝色！
    ::webkit-scrollbar {
        display: none;
    }

    height: calc(~"100vh - 4rem");

    .swiper {
        height: 164px;
        overflow: hidden;

        // position: relative; //重要！
        .old {
            display: none;
        }


        .rv-swiper {
            img {
                display: block;
                box-sizing: border-box;
                width: 100%;
                height: 100%;
                background-color: #fff;
                pointer-events: none;
            }
        }
    }

    .mainData {
        .mainProductsTitle {
            display: flex;
            align-items: center;
            justify-content: center;
            color: @theme-color;
            font-weight: 400;
            font-size: 1.3rem;
        }

        .mainProductsData {
            background-color: #fff;
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            width: 100vw;
            justify-content: flex-start;

            // 如果是 单数： 1 3 5 7： 那么=> border-right
            &>:nth-child(odd) {
                border-right: 1px solid #dddada;
            }

            // 如果是 第一个、 第二个： 那么=> border-top
            // &> :nth-child(1)>,
            // &> :nth-child(2)> {
            //     border-top: 1px solid #ccc;
            // }

            .product {
                border-bottom: 1px solid #dddada;
                flex: 1;
                width: calc((100% - 4rem - 4px) /2);
                min-width: calc((100% - 4rem - 4px) /2);
                max-width: calc((100% - 4rem - 4px) /2);
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                padding: 1rem;

                .productName {
                    font-size: 0.9rem;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                }

                .productPrice {
                    color: @theme-color;
                    font-size: 0.8rem;
                }
            }
        }
    }
}